<template>
  <div :class="isZk ? 'left-menu' : 'left-menu sq'">
    <!-- 1. 本书章节 -->
    <div v-show="isZk" class="menu">
      <el-tabs v-model="activeName" @tab-click="changeSmType">
        <el-tab-pane label="本书章节" name="zj"></el-tab-pane>
        <el-tab-pane label="故事框架" name="bj"></el-tab-pane>
      </el-tabs>
      <span class="has_new" v-if="has_new"></span>
      <div class="menu-block" v-if="activeName == 'zj'">
        <div class="btnBox">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="addJ"
            >新建卷</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="addZ"
            >新建章</el-button
          >
        </div>
        <BookTree
          ref="leftTree"
          :creation_id="creation_id"
          @node-command="handleNodeCommand"
          @node-click="handleNodeClick"
          @share="handleOpenShare"
          @share2="handleOpenShare2"
        />
      </div>

      <!-- 2. 背景设定 (暂时无需实现) -->
      <div class="menu-block" v-else>
        <BookTreeBj
          ref="leftTreeBj"
          :creation_id="creation_id"
          @node-command="handleNodeCommandBj"
          @node-click="handleNodeClickBj"
        />
      </div>
    </div>
    <div class="aiWrite" v-show="isZk" @click="$emit('openWrite')">
      <img src="@/assets/images/aiWrite2.svg" alt="" />
      <span class="text">AI写作导引</span>
    </div>
    <div class="bottomChange">
      <i class="el-icon-d-arrow-left" v-if="isZk" @click="isZk = false"></i>
      <i class="el-icon-d-arrow-right" v-else @click="isZk = true"></i>
    </div>
  </div>
</template>

<script>
import BookTree from "./BookTree.vue";
import BookTreeBj from "./BookTreeBj.vue";
import { createVolume } from "@/api/volumes";
import { createChapter } from "@/api/chapter";

export default {
  name: "LeftMenu",
  data() {
    return {
      isZk: true,
      activeName: "zj",
    };
  },
  components: {
    BookTree,
    BookTreeBj,
  },
  props: {
    has_new: {
      type: Boolean,
      default: () => false,
    },
    activeP: {
      type: String,
      default: () => "",
    },
    creation_id: {},
  },
  methods: {
    handleOpenShare(data) {
      this.$emit("share", data);
    },
    handleOpenShare2(data) {
      this.$emit("share2", data);
    },
    changeSmType() {
      this.$emit("changeType", this.activeName);
    },
    addJ() {
      createVolume({
        creation_id: Number(this.creation_id),
      }).then((res) => {
        this.$refs.leftTree.refreshTreeNode();
      });
    },
    addZ() {
      let treeData = this.$refs.leftTree.treeData;
      if (treeData.length > 0) {
        createChapter({
          volume_id: Number(treeData[treeData.length - 1].id),
        }).then((res) => {
          this.$refs.leftTree.refreshTreeNode(
            treeData[treeData.length - 1].nodeId
          );
          console.log(res);
        });
      } else {
        this.$message({
          type: "info",
          message: "请先建卷后再新建章节",
        });
      }
      return false;
    },
    // 处理树形节点上的menu命令(重命名, 删除, 设置正⽂, 协同等)
    handleNodeCommand(payload) {
      // payload示例: { command:'rename', nodeData:{...} }
      this.$emit("node-command", payload);
    },
    // 点击树节点本身
    handleNodeClick(nodeData) {
      this.$emit("node-click", nodeData);
    },
    handleNodeCommandBj(payload) {
      // payload示例: { command:'rename', nodeData:{...} }
      this.$emit("node-command-bj", payload);
    },
    // 点击树节点本身
    handleNodeClickBj(nodeData) {
      this.$emit("node-click-bj", nodeData);
    },
  },
};
</script>

<style scoped lang="scss">
.has_new {
  display: inline-block;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #4388ff;
  position: absolute;
  right: 100px;
  top: 22px;
}
.left-menu.sq {
  width: 60px;
}

.left-menu {
  display: flex;
  width: 220px;
  height: 100%;
  flex-direction: column;
  transition: 0.5s;
  overflow: hidden;

  .menu {
    flex: 1;
  }

  .menu-block {
    margin-bottom: 16px;

    .btnBox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      padding: 0 23px;
    }

    ::v-deep .el-button {
      padding: 6px 12px !important;
      line-height: 16px;
      border-radius: 6px 6px 6px 6px;
    }

    .placeholder {
      margin: 0;
      color: #999;
      font-size: 14px;
    }
  }

  .aiWrite {
    width: 188px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(#e4f6e3, #f9e8e2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    // position: absolute;
    // bottom: 63px;
    // left: 16px;
    cursor: pointer;
    margin-bottom: 24px;

    img {
      width: 18px;
      height: 18px;
      margin-right: 2px;
    }

    .text {
      color: #ea7e30;
      font-family: "PingFang SC";
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 150%;
    }

    /* 24px */
  }

  .bottomChange {
    line-height: 39px;
    // position: absolute;
    // bottom: 1px;
    // left: 0;
    width: 100%;
    text-align: right;
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
    height: 39px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);

    i {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-right: 20px;
      font-size: 16px;
    }
  }
}
</style>
